$(function() {
    $('.nav-sub>div').click(function() {
        $(this).addClass('nav-sub-active').siblings().removeClass('nav-sub-active')
    });

    $('#ico_art').click(function() {
        $(".pump_img").css("background-image", "url(img/machine.png)");
    });
    $('#ico_3d').click(function() {
        $(".pump_img").css("background-image", "url(img/machine.gif)");
    });


    function p(s) {
        return s < 10 ? '0' + s : s;
    }

    var option, myChart = echarts.init(document.getElementById('chart_press_line')),
    aryjsyl, //进水压力
    arychyl, //出水压力
    arysdyl, //设定压力
    aryx;
    option = {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '0%',
            containLabel: true
        },
        legend: {
            x: 'right',
            y: 'top',
            data: [{
                name: '进水压力',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'bolder',
                    color: '#cccccc'
                },
                icon: 'roundRect'
            }, {
                name: '出水压力',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'bolder',
                    color: '#df3434'
                },
                icon: 'roundRect'
            }, {
                name: '设定压力',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'bolder',
                    color: '#df3434'
                },
                icon: 'roundRect'
            }],
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: aryx,
            axisTick: false,
            // show: false
        }],
        yAxis: [{
            type: 'value',
            splitLine: {　　　　 show: false　　 },
            axisTick: false
        }],
        axisLabel: {
            show: true,
            textStyle: {
                fontSize: "8px",
                color: "#fff",
                align: "center"
            },
            formatter: function(e) {
                return e;
            }
        },
        series: [

            {
                name: '进水压力',
                type: 'line',
                smooth: true,
                symbol: 'none',
                data: aryjsyl
            }, {
                name: '出水压力',
                type: 'line',
                smooth: true,
                symbol: 'none',
                data: arychyl
            }, {
                name: '设定压力',
                type: 'line',
                smooth: true,
                symbol: 'none',
                data: arysdyl
            }
        ],
        color: ["#fff100", "#a7d56e", "#21beef"]
    };

    function show() {
        var myDate = new Date();
        var h = myDate.getHours();
        var m = myDate.getMinutes();
        var halfHours=Number(h * 2) + (m>30?1:0)
        aryjsyl = []; //进水压力
        arychyl = []; //出水压力
        arysdyl = []; //设定压力
        aryx = []; //设定压力
        for (var i = 0;i<=halfHours;i++) {
            var a = "0.3" + Math.floor(Math.random() * 10 + 1);
            var b = "0.7" + Math.floor(Math.random() * 10 + 1);
            aryjsyl.push(a);
            arychyl.push(b);
            arysdyl.push(1.0);
            var xAxi=(i%2==0)?(i / 2 + ':' + '00'): ((i-1)/2 + ':'  + '30' )

            aryx.push(xAxi);
            option.series[0].data = aryjsyl;
            option.series[1].data = arychyl;
            option.series[2].data = arysdyl;
            option.xAxis[0].data = aryx;
        }
        myChart.setOption(option);
    }
    show();
    setInterval(show, 1800000);

})
